{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '编辑器:example/editor/index', 'summernote'])}

<style>
    .note-group-select-from-files{display: none;}
</style>

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">富文本编辑器 summernote</div>
        </header>
        <div class="card-body">
        
          <p>插件使用summernote 0.8.18，官网地址：<a href="https://summernote.org/" target="_blank">https://summernote.org/</a></p>
        <p><strong>默认使用</strong></p>
        <p>给 &lt;textarea&gt; 加上 <code>data-provide="summernote"</code>。您可以使用数据属性应用 summernote 的选项。例如，要设置高度选项，请将 <code>data-height="150"</code> 添加到 <code>&lt;textarea&gt;</code> 中，对于 <code>minHeight</code> 选项，请使用 <code>data-min-height="150"</code>。</p>
        <textarea id="summernote" data-toolbar="full" data-height="350"></textarea>
      </div>
  </div>

</div>

<script type="text/javascript">
    var myLayerIndex;
    var editor;
    function open_image(){
        myLayerIndex = open_layer('选择图片', "{:url('attachment/index/index')}?iframe=1&callback=receiveDataForEditor&multiple=1", function (){});
    }
    function receiveDataForEditor(url){
        layer.close(myLayerIndex);
        $('.modal-backdrop').remove();
        $('.editormd-image-dialog').remove();
        $('div[aria-label="插入图片"]').hide();
        var arr = url.split(',');
        var dom = '';
        for (var i = 0; i < arr.length; i++) {
            dom += '<p><img src="' + arr[i] + '"><br></p>';
        }
        $('#summernote').summernote('code', dom);
    }
    $(document).ready(function(){
        var options = {
            dialogsInBody: true,
            lang: 'zh-CN',
            dialogsFade: true
        };
        var config = {};
        $.each( $('#summernote').data(), function(key, value){
            key = key.replace(/-([a-z])/g, function(x){return x[1].toUpperCase();});

            if ( key == 'provide' ) {
                return;
            }

            config[key] = value;
        });
        options = $.extend(options, config);
        if ( options.toolbar ) {
            switch( options.toolbar.toLowerCase() ) {
                case 'slim':
                options.toolbar = [
                    // [groupName, [list of button]]
                    ['style', ['bold', 'underline', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol']],
                    ['insert', ['link', 'picture']]
                ];
                break;
    
                case 'full':
                options.toolbar = [
                    // [groupName, [list of button]]
                    ['para_style', ['style']],
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['fontsize', ['fontname', 'fontsize', 'height']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph', 'hr']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['do', ['undo', 'redo']],
                    ['misc', ['fullscreen', 'codeview', 'help']]
                ];
                break;
            }
        }
        editor = $('#summernote').summernote(options);

        $('button[aria-label="图片"]').on('click', function(){
            setTimeout(function(){
                var obj = $('div[aria-label="插入图片"] .modal-footer');
                if (obj.find('.choose-image').length > 0) {
                    return;
                }
                obj.append(`<button type="button" onclick="open_image();" class="btn btn-primary choose-image">选择图片</button>`);
            }, 300);
        });
    });
    </script>